<template>
  <div class="profile">
    <!-- 导航条 -->
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      title="编辑资料"
    ></van-nav-bar>

    <!-- 编辑区 -->
    <van-cell-group>
        <!-- hidden 是表单元素的一个固有属性, 可以隐藏, 效果类似于 display: none;  -->
    <input type="file" ref="refPhoto" @change="changePhoto"  hidden>
      <van-cell is-link @click="$refs.refPhoto.click()" title="头像" center>
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="user.photo"
        />
      </van-cell>

      <van-cell is-link title="名称" :value="user.name" @click="clikShowName" />
      <van-cell
        is-link
        title="性别"
        :value="user.gender === 0 ? '男' : '女'"
        @click="clickShowGender"
      />
      <van-cell
        is-link
        title="生日"
        :value="user.birthday"
        @click="showBirthday = true"
      />
    </van-cell-group>

    <!-- 修改名字 -->
    <van-dialog
      @confirm="saveName"
      v-model="showName"
      title="修改姓名"
      show-cancel-button
    >
      <van-field v-model.trim="newName" placeholder="请输入姓名"></van-field>
    </van-dialog>
    <!-- 修改性别 -->
    <!-- 修改性别 -->
    <van-popup v-model="showGender" position="bottom">
      <van-nav-bar
        title="修改性别"
        left-text="取消"
        @click-left="showGender = false"
      >
      </van-nav-bar>
      <van-cell title="男" @click="saveGender(0)" is-link></van-cell>
      <van-cell title="女" @click="saveGender(1)" is-link></van-cell>
    </van-popup>
    <!-- 修改日期 -->
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        @cancel="showBirthday = false"
        @confirm="saveBirthday"
        v-model="newDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { reqGetProfile, reqUpdateInfo, reqUpdatePhoto } from '@/api/user.js'
export default {
  name: 'userProfile',
  data () {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前用户的信息
      user: {},
      newName: '', // 用户名
      newDate: new Date(), // 当前时间
      minDate: new Date(1970, 0, 1), // 最小时间
      maxDate: new Date() // 最大时间
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    //   获取个人信息
    async getUserInfo () {
      const res = await reqGetProfile()
      this.user = res.data.data
    },
    // 点击展示修改用户名弹窗
    clikShowName () {
      // 打开弹窗
      this.showName = true
      //   回显
      this.newName = this.user.name
    },
    // 修改用户名
    async saveName () {
      try {
        // 用户名不能为空
        if (this.newName.trim() === '') return
        //   用户名不能超过7位
        if (this.newName.length > 7) {
          this.$toast.fail('用户名不能超过7位')
          return
        }
        //   发送修改姓名请求
        await reqUpdateInfo({
          name: this.newName
        })
        //  更新视图
        this.user.name = this.newName
        //   输入框清空
        this.newName = ''
        //   发送成功提示
        this.$toast.success('修改成功')
      } catch (e) {
        console.log(e)
      }
    },
    // 打开gender弹层
    clickShowGender () {
      this.showGender = true
    },
    // 修改性别
    async saveGender (gender) {
      try {
        //   发送请求
        await reqUpdateInfo({
          gender
        })
        // 更新视图
        this.user.gender = gender
        // 发送提示信息
        this.$toast.success('修改成功')
        // 关闭弹层
        this.showGender = false
      } catch (e) {
        console.log(e)
      }
    },
    // 修改生日
    async saveBirthday () {
      try {
        // 发送请求
        const birthday = dayjs(this.newDate).format('YYYY-MM-DD')
        await reqUpdateInfo({
          birthday
        })
        //   更新视图
        this.user.birthday = birthday
        //   发送提示
        this.$toast.success('修改成功')
        //   关闭弹层
        this.showBirthday = false
      } catch (e) {
        console.log(e)
      }
    },
    // 修改头像
    async changePhoto () {
      try {
        this.$toast.loading({
          duration: 0,
          overlay: true,
          message: '拼命加载中'
        })
        const file = this.$refs.refPhoto.files[0]
        if (!file) return
        //   console.dir(file)
        // 利用formData收集文件对象
        const formData = new FormData()
        formData.append('photo', file)
        // 发送请求
        const res = await reqUpdatePhoto(formData)
        this.user.photo = res.data.data.photo
        this.$toast.success('上传成功')
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.profile {
    ::v-deep .van-nav-bar .van-icon {
        color: #fff;
    }
}
</style>
